import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import AccountInfo from './components/account-info/Index'
import { TabPane, Tabs } from 'ant-design-vue'
import InsurancePerlodScheme from './components/InsurancePerlodScheme'
import DiscountRecord from './components/DiscountRecord'
@Component
export class SystemDetailView extends Render {
    renderTabs() { 
        return (
            <Tabs>
                <TabPane key="1" tab="长期保方案">
                    <InsurancePerlodScheme />
                </TabPane>
                <TabPane key="2" tab="优惠记录">
                    <DiscountRecord />
                </TabPane>
            </Tabs>
        )
    }
    render() { 
        return (
            <div class="px-24 py-20 flex flex-col h-full">
                <div class="flex-none">
                    <AccountInfo></AccountInfo>
                </div>
                <div class="flex-1 mt-20">
                    { this.renderTabs() }
                </div>
            </div>
        )
    }
}

export default toNative<{}, {}>(SystemDetailView)